<template>
  <div>
    <el-table
      :data="tableData.users"
      border
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="#"
        width="72"
      />
      <el-table-column
        prop="username"
        label="姓名"
      />
      <el-table-column
        prop="email"
        label="邮箱"
      />
      <el-table-column
        prop="mobile"
        label="电话"
      />
      <el-table-column
        prop="role_name"
        label="角色"
      />
      <el-table-column
        prop="mg_state"
        label="状态"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="buttonStatus(scope.row.id, scope.row.mg_state)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="handleEdit(scope.row)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete(scope.row)"
          />
          <el-button
            type="warning"
            icon="el-icon-setting"
            size="mini"
            @click="handleJurisdiction(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="tableData.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="numberOfEntries"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 角色弹框 -->
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="30%"
      :before-close="ondelS"
    >
      <p>当前的用户: {{ roleData.username }}</p>
      <p>当前的角色: {{ roleData.role_name }}</p>
      <el-form ref="form" :model="form">
        <el-form-item label="分配新角色">
          <el-select v-model="formId" placeholder="请选择角色">
            <el-option
              v-for="item in form.roleNe"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ondelS">取 消</el-button>
        <el-button type="primary" @click="determineRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserUidType, deleteEditUser, putUsersIdRole } from '@/api/Support.js'
import { getRoles } from '@/api/roleEditing.js'
export default {
  props: {
    // 获取来的表格数据
    tableData: {
      type: [Object, Array],
      required: true
    },
    // 每页面条数
    numberOfEntries: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      roleData: {},
      // 下拉数据
      form: {
        roleNe: []
      },
      formId: null

    }
  },

  created() {

  },

  methods: {
    // 获取每页面条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.$emit('hand-size', val)
    },
    // 获取当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.$emit('hand-current', val)
    },
    // 表格状态
    async buttonStatus(id, state) {
      console.log(id, state)
      const res = await getUserUidType(id, state)
      console.log(res)
    },
    // 修改页面
    handleEdit(e) {
      console.log(e)
      this.$emit('handle-edit', e)
    },
    // 删除
    handleDelete(e) {
      try {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await deleteEditUser(e.id)
          await this.$emit('delete-User')
          this.$message.success('删除成功')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } catch (err) {
        this.$message.error('错了哦，删除失败')
      }
    },
    // 分配角色
    async handleJurisdiction(e) {
      this.roleData = e
      console.log(e)
      this.dialogVisible = true
      // 根据 ID 查询用户角色
      const res = await getRoles()
      this.form.roleNe = res
      console.log(res)
      // 根据 ID分配用户角色
    },
    // 获取id用户角色
    regionIdClick(e) {
      console.log(e)
    },
    // 确定角色
    async determineRole() {
      console.log(this.formId)
      try {
        await putUsersIdRole({
          id: this.roleData.id,
          rid: this.formId
        })
        this.ondelS()
      } catch (err) {
        console.log(err)
      }
    },
    // 关闭弹框
    ondelS() {
      this.dialogVisible = false
      this.$refs.form.resetFields()
      this.form = {
        roleNe: [],
        // 储存选项
        region: ''
      }
      this.formId = null
      this.roleData = {}
    }
  }
}
</script>

<style scoped lang='less'>

</style>
